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.
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:
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.
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:
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:
Your browser page will be empty:
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:
Edit index.js
file to have only the following:
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:
Edit App.js
as follow:
The code on line 6 is JSX which is react version of html.
On your browser you should see the following:
Edit the App.js
file as follow:
This is all the html for our App component. Now, on your browser you should see the following:
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:
Now, on your browser you should see the following:
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:
Edit GroceryList.js
file under src
folder:
Now, on your browser, you will see the list of items printed:
To be continued ...
Keywords:
React, JavaScript, HTTP, CSS, phpStorm, JetBrains
Top comments (1)
Great job Ahmed