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