DEV Community

Ahmed
Ahmed

Posted on

JS React project with phpSstorm

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

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

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

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

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

Your browser page will be empty:
Alt Text

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

Edit index.js file to have only the following:

Alt Text

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
It has a function component.

Edit App.js as follow:

Alt Text

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

On your browser you should see the following:

Alt Text

Edit the App.js file as follow:

Alt Text

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

Alt Text

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

Alt Text

Now, on your browser you should see the following:

Alt Text

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

Edit GroceryList.js file under src folder:

Alt Text

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

Alt Text

To be continued ...

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

Top comments (1)

Collapse
 
sauelalmonte profile image
You Already Know

Great job Ahmed