INITIAL NOTE: never use VS 'open with live server' to see a react app. Always run 'npm start' from the terminal to see it.
Create the folder where you will place everything. Open the folder in Visual Studio Code.
Make sure npm is installed in the system.
It might be better, before doing anything, to open terminal (right click on left side pane with folder selected and select 'open in integrated terminal'), and run the following commands:
The above it to make sure we don't get stuck during the installation (related to updates of npm, etc). If you ended up getting stuck either way, you might want to check the following link:
https://stackoverflow.com/questions/45433130/npm-install-gets-stuck-at-fetchmetadata
Or google the specific keywords where it got stuck. Keep in mind that the installation (detailed below) can take up several minutes (up to half an hour) so make sure you are actually stuck before attempting to solve the problem.
Important: whenever you encounter a problem, and need to rerun the install (and even if you have closed and reopened VS, created a new directory, etc), make sure to run the following command:
npm cache clear --force
It is better, for reasons I am not aware of, to install it using npx and not to install it globally using npm.
Decide on a name for your app (a new folder with that name will be created inside current folder). Make sure the name you decide on is URL friendly. Example: square-apple.
Now install using npx:
npx create-react-app square-apple --scripts-version 1.1.5
The '--scripts-version...' at the end is so that when components are created using shortcuts, they will be created as class components and not as function components.
If you, however, didn't install it (or something went wrong for some reason), you can force new components to be created as class components (and not functional components) by making use of a visual studio code extension called React Pure to Class (see next).
Use it as follows: Install: React Pure to Class extension. Select all of the functional component that you want to convert. Open the command pallete by clicking Ctrl + shift + p write "React pure to class" and run the command.
Now you need to start to actually build our project. First we will do some tweaks to the setup.
Note for when everything is finished: always before deploying, you do an "npm run build" and then you deploy it.
When you look into your square-apple folder, you will several subfolders, one which is named src which will be the main folder we will be working with.
To see the current 'output' of the whole system, go to the terminal and make sure you are inside your application folder, not your parent one (cd square-apple) and then run: npm start
You should run npm start whenever you want to reopen the application in browser.
Now you want to remove the default setting. Go to the src folder again, and delete all files there except index.js. (Everything else is not needed).
Now indes.js 'calls' a lot of those files we deleted, so we want to also alter the contents of index.js. It is better to start fresh so we are going to delete everything inside it.
From here on we will have a step by step documentation of how we will build a particular app, which I named as udemy-react. So all the codes and examples go back to that app.
We will create three class components: Title, Tasks, and Main.
Title will contain a title.
Tasks is a component that loops through an array that is passed in props (passed to it when called in Main), and return each as an <li> element inside a bigger <ol> element.
And Main combines both Title and Tasks into one component.
Note that List will no longer be used later on, we just have it as an explanatory thing.
Title.js
import React, {Component} from 'react';
class Title extends Component {
render(){
return <h1> {this.props.title} </h1>
}
}
export default Title
List.js
import React, {Component} from 'react';
class List extends Component {
render(){
return(
<ol>
{this.props.tasks.map((task, index) => <li key= {index}> {task} </li>)}
</ol>
)
}
}
export default List
Main.js
import React, {Component} from 'react';
import List from './List'
import Title from './Title'
class Main extends Component {
render() {
return (
<div>
<Title title={'Welcome'}/>
<List tasks={['I am item one', 'you should finish this by today']}/>
<List tasks={['Sleep is not necessary', 'If you work hard you will get there']}/>
</div>
)
}
}
export default Main
index.js:
//index.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Main from './components/Main'
ReactDOM.render(<Main/>, document.getElementById('root'));
Go to the index.html file inside the 'public' folder, and add the needed calls in the header/footer of the html document.