JS React project with phpSstorm
Published: 2021-03-05 14:17:34



Make sure nodejs is installed. From a terminal window, type 'node -v'. If you see a version that means you have node installed.


##phpStorm##

**phpStorm** comes with default shortcuts.

###Plugins###
When you launch **phpStorm**, open the Settings/Preferences dialog [Ctrl+Alt+S], select Plugins. Make sure the *JavaScript* and *TypeScript* bundled plugin is enabled.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uzzk1w1ho0e6xqyb0f5.JPG)

Create new project from **phpStorm**.


Install the package `create-react-app`

Run the following command from a terminal window:


`npx create-react-app my-first-app`

The abve command will create the react application. Upon successful creation, you will get a list of commands:

  `yarn start`
    Starts the development server.

  `yarn build`
    Bundles the app into static files for production.

  `yarn test`
    Starts the test runner.

  `yarn eject`
    Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

From the phpStorm text editor, open the project *my-first-app*. 

You should see the folders and files created under `my-first-app` directory as follow:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1uekz5ioq1rbteb35ho.JPG)



To start the development server, type:

`cd my-first-app`
`npm start`


`npm start` is an alternative for `yarn start`.

This will open the browser.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zoeyada33h698ocwi39.JPG)

If you edit `App.js` file under `src` folder and change line 18 from:

Learn React

to something else, for example:

This is my first React project

You will notice that, after you save the `App.js` file, the previously open page on the browser, will change to:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqyt5j3wecw6cvv95pms.JPG)

This is the first aspect to see how React works. For now, let's edit `App.js` file and remove all the boilerplate code and leave only:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwemdteiowocx1cqb2nu.JPG)

Your browser page will be empty:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2et1fwjxjgvlrlcbgq9.JPG)

You can delete the following files either from phpStorm or from the command line terminal:

`App.css`
`App.test.js`
`index.css`
`logo.svg`
`reportWebVitals.js`
`setupTests.js`

You should see the following files:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7ujbgqtugl0kco3au2k.JPG)

Edit `index.js` file to have only the following:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oejyyvnq9gk70bo7vy3c.JPG)

`App.js` file  has the root component of your react application, i.e. `App`.

Let's say you want to create a grocery list.

Create new file called `GroceryList.js` with the following code:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bw25oyg4wslms8cqqff.JPG)
It has a function component.

Edit `App.js` as follow:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swrhagmltdt5v9n8wrly.JPG)

The code on line 6 is JSX which is react version of html.

On your browser you should see the following:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bsx25rbah5janmxdrgy.JPG)

Edit the `App.js` file as follow:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7e5e307fryofyahy94z.JPG)

This is all the html for our App component. Now, on your browser you should see the following:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2o96vwevpkwhqrajhc47.JPG)

Now we are going to setup the state of our application. The state is managed by react inside our application.

We need to use the `useState` hook. Lets add that into line 1 of `App.js` file.

`useState` returns an array. We can destruct that object array.

The components `App` and `GroceryList` will have `props` hat we can pass to them like we passed attributes to html elements.

Now edit `GroceryList.js` and `App.js` as follow:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q20sqfnlgqxrof8436fe.JPG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w16wtdp1nqnqdzvu83bg.JPG)

Now, on your browser you should see the following:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb5vxpe8rprnz3wituxz.JPG)

It prints out 2 because we have two items in our list.

Now lets print out all of the items using a loop.
First, lets define the `Grocery` component inside a new `Grocery.js` file under `src` folder:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inyhxm6vdm8k865rz0do.JPG)

Edit `GroceryList.js` file under `src` folder:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ofx0fece6js57czw30p.JPG)

Now, on your browser, you will see the list of items printed:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dv0rwth7i3oxxf1fmgis.JPG)

To be continued ...

Keywords:
React, JavaScript, HTTP, CSS, phpStorm, JetBrains