Learn React

This is my attempt to tech a high school hackathon team to learn React

Getting Started

To run React locally, follow this tutorial on reactJs.org. This is currently NOT covered in this tutorial.

React Directly in HTML

How to run React directly in your HTML, without any installation. The full working sample looks like this

<html>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <body>  
    <div id="mydiv"></div>
    <script type="text/babel">
      class Hello extends React.Component {
        render() { return <h1>Hello World!</h1> }
      }
      ReactDOM.render(<Hello />, document.getElementById('mydiv'))
    </script>
  </body>
</html>

You can downloaded react js from CodePen, and run either:

generated JS

Run code in /dist, where script.js was translated and generated by CodePen automatically.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script type="text/babel" src="./script.js"></script>

original JSX

By including ‘babel’ js library, you can include original JSX file (copy from /src to /dist) without using the generated .js.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel" src="./script.babel"></script>

React Topics

CdnJs

All the JS libraries you can include in your html without installing them first. https://cdnjs.com/libraries

Open APIs

https://devresourc.es/tools-and-utilities/public-apis

React w/ Bootstrap

Gatsby and React

Install Gatsby

npm i -g gatsby-cli
gatsby new web
cd web
npm install react-bootstrap bootstrap
Add following to /src/components/layout.js
    import 'bootstrap/dist/css/bootstrap.min.css';
Add following to /src/pages/index.js
    import {Button} from 'react-bootstrap'

Now the React is fully integrated with Gatsby!

Change gabtsy-config.js and /src/pages/index.js to change the landing page!

Add React Code

Try the following in index.js

<Button variant="outline-primary" href="http://yahoo.com">Go to Yahoo</Button> <br />
<Link className="btn btn-outline-primary" to="/page-2/">Go to page 2</Link> <br />

Launch the website! gatsby develop

https://nextjs.org/learn/basics/getting-started

React References

https://www.w3schools.com/react/react_getstarted.asp
https://reactjs.org/docs/create-a-new-react-app.html
https://reactjs.org/docs/getting-started.html

coding-dojo-js

Coding Dojo for kids to learn JS