React JS

What will we cover?

  • What/Why React JS?
  • Basics of React JS
  • Starting a Project
  • Stateful Components
  • Writing Demo App
  • React Native

All notes will be available here

Prerequisites

  • HTML
  • CSS
  • Javascript & ES6

All notes will be available here

What is React?

  • React is a front-end Javascript framework for building user interfaces.

 

  • Allows us to generate modular HTML code with JavaScript.

 

If you want to learn more about what this means or what goals React is trying to accomplish, you can visit the docs here.

Why React?

Before using React we need a reason to use it.

Scenario: You are given the task of writing a webpage that displays a list of users.

 

You can assume you get the user data from a list like this :

    
    [
        {img: "user_0.png", bio: "I'm user 0"},
        {img: "user_1.png", bio: "I'm user 1"},
    ]

Building our Webpage

How can we build a list of users from a given list of data?

Edit the DOM directly in Javascript using the DOM API!

The DOM?

(Document Object Model)

    
    <!-- index.html -->

    <html>
        <body>
            <div id="users_list">

            </div>
        </body>
    </html>

Our users list will be rendered inside the div with an id of "users_list"

    
    <!-- index.html -->

    <html>
        <body>
            <div id="users_list">      

             <div class="user_profile">
                <img src="user_0.png"/>
                <p>I'm user 0!</p>
             </div>
                
             <div class="user_profile">
                <img src="user_1.png"/>
                <p>I'm user 1!</p>
             </div>

            </div>
        </body>
    </html>

End Goal

    
    <!-- index.html -->

    <html>
        <body>
            <div id="users_list">      

             <div class="user_profile">
                <img src="user_0.png"/>
                <p>I'm user 0!</p>
             </div>
                
             <div class="user_profile">
                <img src="user_1.png"/>
                <p>I'm user 1!</p>
             </div>

            </div>
        </body>
    </html>

End Goal

<script>
        const data_returned_from_api = [
            {img: 'user_0.png', bio: "I'm user 0"},
            {img: 'user_1.png', bio: "I'm user 1"},
        ];


        const users_list = document.getElementById('users_list');

        data_returned_from_api.forEach((user) => {
            const userWrapper = document.createElement("div");
            const userPic     = document.createElement("img", {src: user.img});
            const userBio     = document.createElement("p");
            const userBioText = document.createTextNode(user.bio); 
            userBio.appendChild(userBioText); 
            
            userWrapper.appendChild(userPic)
                       .appendChild(userBio);
                       
            users_list.appendChild(userWrapper);
        });

</script>

JavaScript to update the "users_list" div

Even with a simple example, the code to edit the DOM directly gets really messy.

 

 

Now let's see how we could do this in React.

React lets us break down chunks of HTML code into components.

 

For the user profile example we may want a component that outputs a snippet of HTML code similar to this for each user:

    
 <div>
    <img src="user_x.png"/>
    <p>user_x bio</p>
 </div>

We need to write this piece of HTML for any user data. So, let's write a function for it.

Yes. That is HTML being returned from a JS function. Kind of...

    
    function user_profile_and_bio(user_image, user_bio) {
        return (
            <div>
                <img src=user_image />
                <p>user_bio</p>
            </div>
        );
    }

Rewrite as a React Component

    
    function UserProfile(props) {
        return (
            <div>
                <img src={props.img} />
                <p>{props.bio}</p>
            </div>
        );
    };
    
    function user_profile_and_bio(user_image, user_bio) {
        return (
            <div>
                <img src=user_image />
                <p>user_bio</p>
            </div>
        );
    };

Before

After


    const api_data = [
        {img: 'user_0.png', bio: "I'm user 0"},
        {img: 'user_1.png', bio: "I'm user 1"},
    ];

    function UserProfile(props) {
        return (
            <div>
                <img src={props.img} /g>
                <p>{props.bio}</p>
            </div>
        );
    };

    /* Root Component */
    function App() {
        return (
            <div>
                {api_data.map(function(user) {
                    <UserProfile img={user.img} bio={user.bio} />
                  }
                )}
            </div>
        );
    }

First Project Setup

For more detailed instructions follow the React JS docs.

Project Exploration

Stateful Components

Often in our applications we may want to keep some state and upon that state changing we may want our HTML content to change accordingly.

 

Imagine writing a timer component using the tools we've covered so far.

React Native

What is React Native?

  • Allows for the building of mobile (Android & iOS) apps in JavaScript!
     
  • Small differences between writing React and React Native code.
     
  • Mobile apps don't run in browser so we aren't updating the same DOM. Thus, we won't use HTML elements
     
  • Instead of using HTML we use pre-built components that are translated directly to view components of the targeted device.

 

React Native Example

React Native

React

    
    function UserProfile(props) {
       return (
          <div>
            <img src={props.user_image} />
            <p>{props.user_bio}</p>
          </div>
       );
    };

    
    import { Text, View, Image } from "react-native"
    function UserProfile(props) {
        return (
            <View>
               <Image source={{uri: props.user.img}} />
               <Text>{props.user.bio}</Text>
            </View>
        );
    };

React Slides

By clayton_m12

Made with Slides.com

React Slides

  • 253

More from clayton_m12