Web app tin tức-Framework7

1.Tạo project reactjs với name:fw7-news

npx create-react-app fw7-news
cd fw7-news

2.Setup framework7 version 6

npm install framework7
npm install framework7-react
npm install axios

Sửa file index.js thành như sau:

Sửa file App.js thành như sau:

Run project:

npm start

Kết quả hiện như sau là thành công setup project

3.Get api
Ở đây mình dùng api của https://newsapi.org/
Tạo file ConfigParams.js

const apiKey='f35b45cd60c84a48bdbdc12d1ce71d4a';
const API_CONFIG={
    'API_URL':`https://newsapi.org/v2/everything?q=tesla&from=2021-02-27&sortBy=publishedAt&apiKey=${apiKey}&pageSize=5`
}

export default API_CONFIG;

Các bạn tạo apiKey của mình nhé
Edit file App.js thêm:
Thêm constructor

constructor(props) {
    super(props);
    this.state = {
      listData: [],//show list data
      isLoading: false//show loading
    };
  }

Get api

componentDidMount() {
    this.setState({
      isLoading: true,
    });
    axios
      .get(ConfigParam.API_URL)
      .then((response) => {
        this.setState({ listData: response.data.articles, isLoading: false });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

Show list new:

<List medial-list>
                  {this.state.listData.map((item, index) => (
                    <ListItem
                      title={item.title}
                      key={index}
                    >
                      <img
                        slot="media"
                        alt={item.title}
                        src={item.urlToImage}
                        width="44"
                      />
                    </ListItem>
                  ))}
                </List>

File App.js hoàn chỉnh

Run project nếu hiện kết quả như sau là thành công

Link code in here