npx create-react-app app-name
Create a react app using create react app. First install node, use Node.js -v to check version/if installed.
HTML file (index.html):
<html>
<head>
<link rel="stylesheet" href="index.css">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
JS file (index.js):
function MainContent(){
return (
<main>
<h1>Hello React!</h1>
</main>
)
}
function Navbar(){
return (
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
)
}
ReactDOM.render(
<div>
<Navbar />
<MainContent />
</div>,
document.getElementById("root")
)
To try out React without installation.
.gitignore - used by git to determine which files and directories
to ignore when committing code.
package.json - file outlines all the settings for the React app. All tools and
dependencies installed are set here.
node_modules - contains dependencies and sub-dependencies of packages
used by the current React app, specified by package.json.
package-lock.json - this file contains the exact dependency tree
installed in node_modules/. Provides a way for teams work together to make sure they have the same
version of dependencies. Also contains a history of changes made to packange.json.
public - contains assets that would be used without additional processing.
index.html is the entry point for the web app. Usually through a div with an id of "root" or "container".
src - the MAIN directory. Contains all the JavaScript and React code that will be processed.
App.js is used as the main component. index.js used as the connection between UI and React code.
Some information about the folders and files when first setting up a React app.
Basic fundamentals:
1. HTML
2. CSS
3. JavaScript (classes, functions, objects, variable scope, APIs, array methods)
Knowing how to use npm
Some things to know before using React.